<template>
    <!-- 保存的城市列表 -->
     <div class="listitem" @mouseenter="handleButtonOpen" @mouseleave="handleButtonClosed">
        <div class="item-text" :class="{ active: buttonShow }">
            <span>{{ item.city }}</span>
            <span>{{ item.temperature }}度</span>
        </div>
        <div class="item-button" v-if="buttonShow">
            <button @click="handleOpenCityWeather">查看</button>
            <button @click="handleDeleteCity">删除</button>
        </div>
     </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { WeatherStore } from '@/stores/counter';

const weatherStore = WeatherStore()
const { removeCityWeather } = weatherStore

const router = useRouter()
const buttonShow = ref(false)
const props = defineProps({
    item: {
        type:Object,
        required:true,
    }
})

//鼠标移入移出
const handleButtonOpen = () => {
  buttonShow.value = true
}
const handleButtonClosed = () => {
  buttonShow.value = false
}

//"查看"
const handleOpenCityWeather = () => {
    router.push({
        name:'cityweather',
        params: {Adcode:props.item.adcode},
        query:{search:props.item.city}
    })
}
//"删除"
const handleDeleteCity = () => {
  removeCityWeather(props.item.adcode)
}
</script>

<style lang="scss" scoped>
.listitem {
  display: flex;
  justify-content: space-between;
  .item-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    width: 100%;
    background-color: #004e71;
    margin-bottom: 15px;
    padding-inline: 15px;
    cursor: pointer;
    transition-duration: 0.5s;
    &.active {
      width: 80%;
      transition-duration: 0.2s;
    }
  }
  .item-button {
    display: flex;
    justify-content: space-between;
    button {
      margin-left: 10px;
      width: 80px;
      height: 40px;
      font-size: 18px;
      color: #fff;
      background-color: #eab308;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
  }
}
</style>